<template>
	<div class="wrapper">
		<div class="dis">
			<div class="main">
				<div class="dia">
					<div class="line">

					</div>
					<div class="basic">
						基本信息
					</div>
				</div>
				<div class="main_line">

				</div>
				<div class="">
					<van-field v-model="agentPhoneNo" label="手机号" placeholder="作为登录帐号" :border="false" />
					<van-field v-model="agentName" label="代理商名称" placeholder="请输入代理商名称" :border="false" />
					<van-field v-model="unencrypted" label="设置密码" placeholder="作为登录密码" :border="false" />
				</div>
			</div>
		</div>
		<div class="dis">
			<div class="main">
				<div class="dia">
					<div class="line">

					</div>
					<div class="basic">
						认证信息
					</div>
				</div>
				<div class="main_line">

				</div>
				<div class="">
					<van-field v-model="agentIdCardName" label="姓名" placeholder="请输入姓名" :border="false" />
					<van-field v-model="agentIdCardNo" label="身份证号" placeholder="请输入身份证号" :border="false" />
				</div>
				<div class="info">
					<div class="form">
						<div class="upload" @click="jurisdiction">
							<div class="left">
								<van-uploader :before-read="file => afterReadUploadImg(file, 'agentIdCardFront')">
									<img class="uploadImg"
										:src="agentIdCardFront ? agentIdCardFront : 'https://mtpospay.com/cardz.png'"
										alt="" />
								</van-uploader>


								<div class="uploader_title">身份证人像照</div>
							</div>
							<div class="right">
								<van-uploader :before-read="file => afterReadUploadImg(file, 'agentIdCardBack')">
									<img class="uploadImg"
										:src="agentIdCardBack ? agentIdCardBack : 'https://mtpospay.com/cardf.png'"
										alt="" />
								</van-uploader>
								<div class="uploader_title">身份证国徽照</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="dis">
			<div class="main">
				<div class="dia">
					<div class="line">

					</div>
					<div class="basic">
						结算信息
					</div>
				</div>
				<div class="main_line">

				</div>
				<div class="">
					<van-field v-model="bankCardNo" label="卡号" placeholder="请输入卡号" :border="false" @blur="deposit" />
					<van-field v-model="bankCardName" label="开户行" placeholder="请输入开户行" :border="false"
						:disabled="true" />
					<van-field v-model="bankCardPhone" label="手机号" placeholder="请输入银行预留手机号" :border="false" />
				</div>
			</div>
		</div>
		<div class="btn_box dis">
			<div class="btn dis" @click="submit">
				提交
			</div>
		</div>
		<transition name="van-slide-down">
			<div class="pouple" v-if="visible">
				<div class="pouple_box">
					<div class="specification">
						相机，相册权限说明
					</div>
					<div class="pouple_font">
						便于您使用该功能上传您的照片/图片及用于新增服务商场景中读取和写入相册和文件内容
					</div>
				</div>
			</div>
		</transition>

	</div>
</template>

<script>
	import {
		getCardBin,
		addAgent
	} from '@/api/terminal'
	import axios from 'axios'
	import md5 from 'js-md5/src/md5.js'
	import {
		convertImg
	} from '../../utils/compressor.js'
	import store from '@/store'
	import {
		showToast
	} from 'vant'
	import idCardFront from '@/assets/auth/cardface.png'
	import idCardBack from '@/assets/terminal/card.png'
	// import bankCardFront from '@/assets/auth/bank.png'
	export default defineComponent({
		name: 'sateActive',
		setup() {
			const router = useRouter()
			const routers = useRoute()
			// const visible = ref(false)
			const state = reactive({
				visible: false,
				unencrypted: "",

			})

			const info = reactive({
				parentNo: store.state.user.agentNo,
				agentPhoneNo: "",
				password: "",
				agentName: "",
				agentIdCardFront: "",
				agentIdCardBack: "",
				agentIdCardName: "",
				agentIdCardNo: "",
				bankCardNo: "",
				bankCardName: "",
				bankCardPhone: "",
				// configId: ""
			})
			const jurisdiction = () => {
				const permission = 'android.permission.READ_EXTERNAL_STORAGE' // 要检查的权限
				plus.android.checkPermission(
					permission,
					granted => {
						// 0(已获取权限) -1未获取权限
						if (granted.checkResult == -1) {
							state.visible = true
						} else if (granted.checkResult == 0) {
							afterReadUploadImg()
						}

					},
					error => {
						console.error('Error checking permission:', error.message)
					}
				)
				const permissionCAMERA = 'android.permission.CAMERA' // 要检查的权限
				plus.android.checkPermission(
					permissionCAMERA,
					granted => {
						// 0(已获取权限) -1未获取权限
						if (granted.checkResult == -1) {
							state.visible = true
						} else if (granted.checkResult == 0) {
							state.visible = false
						}

					},
					error => {
						console.error('Error checking permission:', error.message)
					}
				)
				plus.android.requestPermissions(['android.permission.READ_EXTERNAL_STORAGE',
						'android.permission.CAMERA'
					],
					(e) => {
						//关闭
						state.visible = false
						if (e.granted.length > 0) {
							//执行你有权限后的方法
							console.log('afterReadUploadImg')
							afterReadUploadImg()
						}
					})
			}
			const deposit = () => {
				getCardBin({
					cardNo: info.bankCardNo
				}).then(res => {
					info.bankCardName = res.data.issnam

				})
			}
			const submit = () => {
				console.log(store.state.user.invitation)
				// info.configId = routers.query.configId
				info.password = md5(state.unencrypted)
				if (!validateConfig(info)) {
					return
				}
				
				addAgent(info).then(res => {
					if (store.state.user.invitation == 0) {
						router.push({
							path: 'invite'
						})
						return
					}
					showToast('添加成功')
					setTimeout(() => {
						router.go(-1)
					}, 2000)

				})
			}
			const validateConfig = (configName) => {
				let config = configName
				for (let key in config) {
					console.log(key)
					let value = config[key];
					if (value === undefined || value === null || value === '') {

						console.log(`${configName} has invalid field: ${key} = ${value}`)
						showToast('所有项为必填项，不能为空')
						// this.$message({
						// 	message: '所有项为必填项，不能为空',
						// 	type: 'warning'
						// });
						return false;
					} else if (key == 'agentPhoneNo' || key == 'bankCardPhone') {
						if (value.length != 11) {
							showToast('请输入正确手机号')
							return false;
						}
					}

				}
				return true;
			}
			const afterReadUploadImg = (file, key) => {
				console.log(file, key)
				// store.state.
				const formData = new FormData();
				formData.append('file', file);
				store.dispatch('data/GetLoading', true)
				axios.post('https://cxfagent.mtpospay.com/app-service/file/addFile', formData, {
						headers: {
							'token': localStorage.getItem('token'),
							'sysType': 'app',
						}
					})
					.then(response => {
						console.log(response.data.data.url);
						store.dispatch('data/GetLoading', false)
						if (key == 'agentIdCardFront') {
							info.agentIdCardFront = response.data.data.url
						} else {
							info.agentIdCardBack = response.data.data.url
						}
					})
					.catch(error => {
						console.error(error);
					});

			}
			return {
				...toRefs(state),
				...toRefs(info),
				submit,
				deposit,
				jurisdiction,
				afterReadUploadImg,
				validateConfig
			}
		}
	})
</script>
<style scoped lang="scss">
	.wrapper {
		width: 100%;
		height: 100%;
		min-height: 100vh;
		background-color: #FFF9F9;

		.main {
			width: 92%;
			// height: 124px;
			background: #fff;
			padding: 13px 13px 11px 13px;
			box-sizing: border-box;
			margin-top: 12px;

			.line {
				width: 3px;
				height: 13px;
				background: #FF5A3D;
				border-radius: 2px;
			}

			.basic {
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 14px;
				color: #FF5A3D;
				margin-left: 8px;
			}

			.main_line {
				width: 100%;
				height: 1px;
				border-bottom: 1px solid #F3F3F3;
				margin-top: 13px;
			}

			.card {
				margin-top: 12px;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 12px;
				color: #FF5A3D;

				img {
					width: 133px;
					height: 92px;
				}
			}

			.info {
				margin-top: 12px
			}

			.form {
				background: #fffffe;

				.uploader_title {
					text-align: center;
					padding: 10px;
					font-size: 12px;
					color: #FF5A3D;
				}

				.upload {
					// padding: 10px;
					display: flex;
					justify-content: space-between;

					.left {
						position: relative;

						.loading {
							position: absolute;
							left: 50%;
							top: 50%;
							transform: translate(-50%, -50%);
						}
					}

					.uploadImg {
						border-radius: 6px;
						width: 150px;
						height: 100px;
					}
				}

				.infoMax {
					padding: 0px 20px 10px 20px;
				}

				.info {
					background: #ffffff;
					box-shadow: 0px 0px 10px #ececec;
					opacity: 1;
					border-radius: 20px;
					padding: 10px;
					display: flex;
					align-items: center;
					font-size: 12px;
					font-family: 'Avenir', Helvetica, Arial, sans-serif;

					span {
						margin-left: 5px;
					}

					font-weight: 400;
					color: #717882;
					opacity: 1;
				}
			}
		}
	}

	::v-deep .van-cell {
		padding: 10px 0px 0px 0px;
		box-sizing: border-box;
	}

	::v-deep .van-field__label {
		color: #333333 !important;
	}

	.btn_box {
		margin-top: 32px;

		.btn {
			width: 339px;
			height: 41px;
			background: #FF5A3D;
			border-radius: 6px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 15px;
			color: #FFFFFF;
		}
	}

	.pouple {
		display: flex;
		position: absolute;
		top: 4px;
		align-items: center;
		justify-content: center;

		.pouple_box {
			width: 92%;
			background-color: #fff;
			padding: 8px 12px 12px 12px;
			border-radius: 4px;
			line-height: 18px;
		}

		.pouple_font {
			margin-top: 6px;
			font-size: 14px;
		}

		.specification {
			font-size: 16px;
			font-weight: bold;
		}
	}
</style>